<script>
import { reactive, toRefs,onMounted, getCurrentInstance } from "vue";

import Days from "@/components/Charts/PieCharts/Days.vue";
import Months from "@/components/Charts/PieCharts/Months.vue";
import Quarters from "@/components/Charts/PieCharts/Quarters.vue";
import Years from "@/components/Charts/PieCharts/Years.vue";
export default {
  components: { Days,Months, Quarters,Years },
  setup() {
    const state = reactive({
      labelList:  ['北门', '西北门', '南门', '西门', '东门'],
      isGetDatad: false,// 是否获取到数据，异步更新子组件
      isGetDatam: false,// 是否获取到数据，异步更新子组件
      isGetDataq: false,// 是否获取到数据，异步更新子组件
      isGetDatay: false,// 是否获取到数据，异步更新子组件
      //   dataList: [150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
             
    // ],
    dataList: [],
    // dataListm:[150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,
    //              150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,],
    dataListm: [],
    dataListq: [],          
    // dataListq:[150, 230, 224, 218, 135, 147, 260,120, 132, 101,
    //              220, 182, 191, 234, 290,150, 212, 201, 154, 190,],             
    // dataListy:[150, 230, 224, 218, 135 ],
    dataListy: [],
    });
    const { proxy } = getCurrentInstance();
    onMounted(async () => {
      //请求接口
      proxy.$API.statGate.recentlyDayFlowList.get({"day":"30"}).then((res) => {      
      if (res.code == 200) {
        res.data.forEach(element => {
          state.dataList.push(parseInt(element["gdCountIn"]))
        });
        } 
        state.isGetDatad = true;
        console.log(state.dataList);
      });
      //请求接口
      proxy.$API.statGate.recentlyMonthFlowList.get({"month":"12"}).then((res) => {      
      if (res.code == 200) {
        res.data.forEach(element => {
          state.dataListm.push(parseInt(element["gdCountIn"]))
        });
        } 
        for (let i = 0; i < res.data.length; ) {   
          state.dataListq.push(parseInt(res.data[i]["gdCountIn"])+parseInt(res.data[i+1]["gdCountIn"])+parseInt(res.data[i+2]["gdCountIn"]));           
          i+=3
        }  
        console.log(state.dataListq);
        state.isGetDataq = true;
        console.log(state.dataListm);
        state.isGetDatam = true;
      });
      //请求接口
      proxy.$API.statGate.recentlyYearFlowList.get({"year":"5"}).then((res) => {      
      if (res.code == 200) {
        res.data.forEach(element => {
          state.dataListy.push(parseInt(element["gdCountIn"]))
        });
        } 
        console.log(state.dataListy);
        state.isGetDatay = true;
      });
    });
    return { ...toRefs(state) };
  },
};
</script>

<template>
  <div style="display: flex; height: 50%">
    <Days :labelList="labelList" :dataList="dataList" v-if="isGetDatad"/>
    <Months :labelList="labelList" :dataListm="dataListm" v-if="isGetDatam"/>
  </div>
  <div style="display: flex; height: 50%">
    <Quarters :labelList="labelList" :dataListq="dataListq" v-if="isGetDataq"/>
    <Years :labelList="labelList" :dataListy="dataListy" v-if="isGetDatay"/>
  </div>

</template>
<style scoped>
</style>